<template>
	<view class="content">
		<view class="section-0">
			<view class="section-body">
				<view class="project-name" @click="handleGo()">
					<text class="iconfont icon-qiehuan" v-if="showIcon"></text>{{projectName !== '' ? projectName : curProject.project_name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		projectAllApi,
		projectSonApi
	} from '@/api/statistics.js';
	import { mapGetters, mapActions} from 'vuex';
	export default{
		data() {
			return {
				showProject: false,
				selectedProject: [],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
				form: {
					project_name: '',
				},
				list: []
			}
		},
		props: {
			projectName: {
				type: String,
				default: ''
			},
			showIcon: {
				type: Boolean,
				default: true
			},
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject',
				userInfo: 'system/getUserInfo',
				curRole: 'system/getCurRole',
			})
		},
		methods:{
			...mapActions({setCurProject: 'system/setCurProject'}),
			handleGo() {
				this.$emit("go", '/pages/common/project_select/index')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.section-1{
	
		width: 100%;
		background: #2e5efe;
		.section-body {
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
			padding-bottom: 50rpx;
			padding-top: 40rpx;
			.list {
				width: 100%;
				box-sizing: border-box;
				padding: 0 40rpx;
				box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.05) inset;
	
				.item {
					width: 100%;
					border-bottom: solid 2rpx #f2f2f0;
	
					.parent {
						width: 100%;
						padding: 30rpx 0;
						@include clear();
						.mark{
							width: 30rpx;
							text-align: right;
							float: right;
							height: 30rpx;
							line-height: 30rpx;
							padding: 10rpx 0;
							.iconfont{
								font-size: 30rpx;
								color: #1534ce;
							}
						}
						.name {
							width: calc(100% - 80rpx);
							height: auto;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 30rpx;
							letter-spacing: 2rpx;
							color: #3b3c40;
							// text-overflow: ellipsis;
							// overflow: hidden;
							// white-space: nowrap;
							float: left;
							padding: 10rpx 0;
	
							.status {
								display: inline-block;
								padding-left: 10rpx;
								padding-right: 10rpx;
								height: 30rpx;
								line-height: 30rpx;
								background-color: #00cdb4;
								border-radius: 15rpx;
								text-align: center;
								font-size: 16rpx;
								color: #fff;
								margin-right: 8rpx;
								position: relative;
								top: -5rpx;
							}
						}
	
						.action {
							float: left;
							width: 32rpx;
							margin-right: 18rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: left;
							color: #3b3c40;
	
							.iconfont {
								font-size: 32rpx;
								transition: 0.2s ease;
								transform: rotate(90deg);
							}
	
						}
					}
	
					.child {
						width: 750rpx;
						margin-left: - 40rpx;
						background: #f2f2fa;
	
						.child-item {
							width: 670rpx;
							margin-left: 40rpx;
							border-bottom: 2rpx solid #e3e8f5;
							padding: 10rpx 0;
							&:last-child {
								border-bottom: none;
							}
	
							box-sizing: border-box;
							padding-left: 50rpx;
							padding-top: 20rpx;
							padding-bottom: 20rpx;
	
							.child-status {
								width: 100%;
								height: 20rpx;
								@include clear();
	
								.circle {
									float: left;
									width: 14rpx;
									height: 14rpx;
									border-radius: 50%;
									background: #badc1f;
									margin-top: 5rpx;
								}
	
								.status-name {
									float: left;
									height: 20rpx;
									line-height: 20rpx;
									margin-left: 10rpx;
									font-size: 16rpx;
									color: #7f98ae;
								}
							}
	
							.top {
								width: 100%;
								@include clear();
							
	
								.name {
									float: left;
									width: 620rpx;
									padding: 10rpx 0;
									line-height: 30rpx;
									color: #3b3c40;
									font-size: 26rpx;
									// text-overflow: ellipsis;
									// overflow: hidden;
									// white-space: nowrap;
								}
	
								.imgs {
									padding-top: 10rpx;
									width: 100%;
									@include clear();
	
									.img {
										float: left;
										margin-right: 25rpx;
										width: 113rpx;
										height: 42rpx;
										background-color: #ffffff;
										border-radius: 21rpx;
										text-align: center;
										line-height: 42rpx;
										font-size: 16rpx;
										font-weight: bold;
										font-stretch: normal;
										line-height: 42rpx;
										letter-spacing: 0rpx;
										color: #1534ce;
										box-shadow: 0 0 30rpx 8rpx rgba(#bcbcb5, 0.17);
	
										&:last-child {
											margin-right: 0;
										}
									}
	
									.img_disabled {
										color: rgba(#999, 0.3);
									}
	
								}
	
							}
						}
					}
				}
	
				.item__expand {
					.parent {
						.action {
							.iconfont {
								transform: rotate(-90deg);
							}
						}
					}
	
					.child {
						box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.03) inset;
					}
				}
	
			}
	
			.actions {
				width: 100%;
				height: 50rpx;
				margin-top: 29rpx;
				padding-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
	
				.action {
					width: 288rpx;
					height: 48rpx;
					background-color: #395cf5;
					border-radius: 20rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 48rpx;
					color: #ffffff;
	
					text {
						&:first-child {
							margin-right: 20rpx;
						}
					}
				}
	
				.search {
					background-color: #1534ce;
				}
			}
	
			.form {
				width: 100%;
				padding: 0 75rpx;
				padding-top: 0rpx;
				box-sizing: border-box;
				position: relative;
	
				.area-container {
					position: absolute;
					top: 110rpx;
					left: 75rpx;
					z-index: 10;
					width: 600rpx;
					background-color: #1433cd;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 24rpx;
					padding-bottom: 12rpx;
	
					&::before {
						position: absolute;
						top: -12rpx;
						left: 32rpx;
						content: '';
						border-bottom: 12rpx solid #1433cd;
						border-left: 12rpx solid transparent;
						;
						border-right: 12rpx solid transparent;
					}
	
					.item {
						padding: 0 18rpx;
						height: 44rpx;
						background-color: #fafbfd;
						border-radius: 20rpx;
						margin-bottom: 12rpx;
						color: #1433cd;
						font-size: 26rpx;
						text-align: center;
						line-height: 44rpx;
						float: left;
						margin-right: 12rpx;
					}
	
					.item__active {
						background-color: orange;
						color: #fff;
					}
	
				}
	
				.form-item2 {
	
					width: 600rpx;
					height: 48rpx;
					border-radius: 20rpx;
					border: solid 2rpx #1534ce;
					margin: 0 auto;
					margin-bottom: 34rpx;
					@include clear();
	
					.label {
						float: left;
						width: 134rpx;
						height: 48rpx;
						text-align: center;
						line-height: 44rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #1534ce;
					}
	
					.shape {
						width: 3rpx;
						height: 32rpx;
						background-color: #7f98ae;
						float: left;
						margin-top: 8rpx;
					}
	
					.input {
						float: left;
						width: calc(100% - 134rpx - 3rpx);
	
						.input-body {
							box-sizing: border-box;
							width: 100%;
							height: 44rpx;
							padding: 0 !important;
							border: none;
							padding-left: 30rpx !important;
							padding-right: 30rpx !important;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: rgba(0, 0, 0, 0.7);
						}
	
						.input-placeholder {
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: rgba(0, 0, 0, 0.5);
						}
					}
	
				}
	
				.form-item {
					width: 600rpx;
					height: 48rpx;
					border-radius: 20rpx;
					border: solid 2rpx #1534ce;
					margin: 0 auto;
					margin-bottom: 34rpx;
					@include clear();
	
					.label {
						float: left;
						width: 77rpx;
						height: 48rpx;
						text-align: center;
						line-height: 44rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #1534ce;
					}
	
					.shape {
						width: 3rpx;
						height: 32rpx;
						background-color: #7f98ae;
						float: left;
						margin-top: 8rpx;
					}
	
					.input {
						float: left;
						width: calc(100% - 77rpx - 80rpx - 3rpx);
	
						.input-body {
							box-sizing: border-box;
							width: 100%;
							height: 44rpx;
							line-height: 44rpx;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #1534ce;
							text-align: center;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
	
					.action {
						float: left;
						width: 80rpx;
						line-height: 44rpx;
						height: 44rpx;
						text-align: center;
						font-size: 32rpx;
						color: #1534ce;
						transition: 0.3s ease;
					}
	
					.action__active {
						transform: rotate(180deg);
					}
				}
	
				.size2 {
					.label {
						width: 77rpx;
					}
	
					.input {
						width: calc(100% - 77rpx - 3rpx);
						position: relative;
	
						.iconfont {
							position: absolute;
							right: 25rpx;
							top: 7rpx;
							font-size: 30rpx;
							color: #dad9df;
						}
					}
				}
	
			}
	
			.total {
				box-sizing: border-box;
				padding: 0 70rpx;
				height: 80rpx;
				line-height: 70rpx;
				font-size: 22rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 80rpx;
				letter-spacing: 0rpx;
				color: #3b3c40;
	
				.date-picker {
					height: 80rpx;
					line-height: 80rpx;
					float: right;
					font-size: 22rpx;
	
					.iconfont {
						line-height: 80rpx;
						font-size: 30rpx;
						color: #d8d8d5;
					}
				}
			}
	
			.charts {
				width: 100%;
				box-sizing: border-box;
				height: 315rpx;
				padding: 0 70rpx;
				padding-left: calc(70rpx - 15px);
				margin-bottom: 30rpx;
	
				#echarts {
					width: 100%;
					height: 100%;
				}
			}
	
			.top-tab {
				width: 670rpx;
				margin-left: 40rpx;
				height: 52rpx;
				line-height: 52rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 30rpx;
				margin-top: 15rpx;
				border-bottom: solid 3rpx #f2f2f0;
	
				.item {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 50rpx;
					letter-spacing: 0rpx;
					color: #d8d8d5;
					position: relative;
	
					.shape {
						opacity: 0;
						transform: translateY(6rpx);
						position: absolute;
						bottom: -6rpx;
						width: 100%;
						height: 8rpx;
						background-color: #1534ce;
						border-radius: 8rpx;
						transition: 0.3s ease;
					}
				}
	
				.item__active {
					color: #3b3c40;
	
					.shape {
						opacity: 1;
						transform: translateY(0rpx);
					}
				}
			}
		}
		
	}
	.content{
		.pop{
			width: 750rpx;
			height: 100vh;
			background-color: #fff;
			// border-radius: 35rpx;
			overflow: hidden;
			.title{
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				background-color: #1534ce;
				font-size: 42rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 4rpx;
				color: #ffffff;
				text-align: center;
			}
			
		}
		.project-pop{
			
				.body{
					padding: 40rpx 50rpx;
					.wrapper{
						width: 100%;
						height: 540rpx;
						overflow-y: auto;
						overflow-x: hidden;
					}
				}
			
		}
		.section-0{
			
				width: 100%;
				background-color: #2e5efe;
				.section-body{
					width: 100%;
					padding-left: 40rpx;
					height: 90rpx;
					padding-right: 40rpx;
					background-color: #1534ce;
					background-size: cover;
					background-repeat: no-repeat;
					border-top-left-radius: 50rpx;
					border-top-right-radius: 50rpx;
					overflow: hidden;
					box-sizing: border-box;
					.project-name{
						margin-top: 24rpx;
						width: 100%;
						height: 42rpx;
						font-size: 26rpx;
						font-weight: light;
						font-stretch: normal;
						line-height: 42rpx;
						letter-spacing: 0rpx;
						color: #ffffff;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						.iconfont{
							font-weight: normal;
							font-size: 26rpx;
							margin-right: 20rpx;
						}
					}
				}
			
		}
	}
</style>
